<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Map with links between the plotted cities</title>
    <style type="text/css">
        body {
            color: #5d5d5d;
            font-family: Helvetica, Arial, sans-serif;
        }

        h1 {
            font-size: 30px;
            margin: auto;
            margin-top: 50px;
        }

        .container {
            max-width: 800px;
            margin: auto;
        }

        /* Specific mapael css class are below
         * 'mapael' class is added by plugin
        */

        .mapael .map {
            position: relative;
        }

        .mapael .mapTooltip {
            position: absolute;
            background-color: #fff;
            moz-opacity: 0.70;
            opacity: 0.70;
            filter: alpha(opacity=70);
            border-radius: 10px;
            padding: 10px;
            z-index: 1000;
            max-width: 200px;
            display: none;
            color: #343434;
        }
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"
            charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js" charset="utf-8"></script>
    <script src="../../js/jquery.mapael.js" charset="utf-8"></script>
    <script src="../../js/maps/france_departments.js" charset="utf-8"></script>
    <script src="../../js/maps/world_countries.js" charset="utf-8"></script>
    <script src="../../js/maps/usa_states.js" charset="utf-8"></script>

    <script type="text/javascript">
        $(function () {
            $(".mapcontainer").mapael({
                map: {
                    name: "world_countries",
                    defaultArea: {
                        attrs: {
                            fill: "#f4f4e8"
                            , stroke: "#ced8d0"
                        }
                    }
                    // Default attributes can be set for all links
                    , defaultLink: {
                        factor: 0.4
                        , attrsHover: {
                            stroke: "#a4e100"
                        }
                    }
                    , defaultPlot: {
                        text: {
                            attrs: {
                                fill: "#000"
                            },
                            attrsHover: {
                                fill: "#000"
                            }
                        }
                    }
                },
                plots: {
                    'paris': {
                        latitude: 48.86,
                        longitude: 2.3444,
                        tooltip: {content: "Paris<br />Population: 500000000"}
                    },
                    'newyork': {
                        latitude: 40.667,
                        longitude: -73.833,
                        tooltip: {content: "New york<br />Population: 200001"}
                    },
                    'sanfrancisco': {
                        latitude: 37.792032,
                        longitude: -122.394613,
                        tooltip: {content: "San Francisco"}
                    },
                    'brasilia': {
                        latitude: -15.781682,
                        longitude: -47.924195,
                        tooltip: {content: "Brasilia<br />Population: 200000001"}
                    },
                    'roma': {
                        latitude: 41.827637,
                        longitude: 12.462732,
                        tooltip: {content: "Roma"}
                    },
                    'miami': {
                        latitude: 25.789125,
                        longitude: -80.205674,
                        tooltip: {content: "Miami"}
                    },

                    // Size=0 in order to make plots invisible
                    'tokyo': {
                        latitude: 35.687418,
                        longitude: 139.692306,
                        size: 0,
                        text: {content: 'Tokyo'}
                    },
                    'sydney': {
                        latitude: -33.917,
                        longitude: 151.167,
                        size: 0,
                        text: {content: 'Sydney'}
                    },
                    'plot1': {
                        latitude: 22.906561,
                        longitude: 86.840170,
                        size: 0,
                        text: {content: 'Plot1', position: 'left', margin: 5}
                    },
                    'plot2': {
                        latitude: -0.390553,
                        longitude: 115.586762,
                        size: 0,
                        text: {content: 'Plot2'}
                    },
                    'plot3': {
                        latitude: 44.065626,
                        longitude: 94.576079,
                        size: 0,
                        text: {content: 'Plot3'}
                    }
                },
                // Links allow you to connect plots between them
                links: {
                    'link1': {
                        factor: -0.3
                        // The source and the destination of the link can be set with a latitude and a longitude or a x and a y ...
                        , between: [{latitude: 24.708785, longitude: -5.402427}, {x: 560, y: 280}]
                        , attrs: {
                            "stroke-width": 2
                        }
                        , tooltip: {content: "Link"}
                    }
                    , 'parisnewyork': {
                        // ... Or with IDs of plotted points
                        factor: -0.3
                        , between: ['paris', 'newyork']
                        , attrs: {
                            "stroke-width": 2
                        }
                        , tooltip: {content: "Paris - New-York"}
                    }
                    , 'parissanfrancisco': {
                        // The curve can be inverted by setting a negative factor
                        factor: -0.5
                        , between: ['paris', 'sanfrancisco']
                        , attrs: {
                            "stroke-width": 4
                        }
                        , tooltip: {content: "Paris - San - Francisco"}
                    }
                    , 'parisbrasilia': {
                        factor: -0.8
                        , between: ['paris', 'brasilia']
                        , attrs: {
                            "stroke-width": 1
                        }
                        , tooltip: {content: "Paris - Brasilia"}
                    }
                    , 'romamiami': {
                        factor: 0.2
                        , between: ['roma', 'miami']
                        , attrs: {
                            "stroke-width": 4
                        }
                        , tooltip: {content: "Roma - Miami"}
                    }
                    , 'sydneyplot1': {
                        factor: -0.2
                        , between: ['sydney', 'plot1']
                        , attrs: {
                            stroke: "#a4e100",
                            "stroke-width": 3,
                            "stroke-linecap": "round",
                            opacity: 0.6
                        }
                        , tooltip: {content: "Sydney - Plot1"}
                    }
                    , 'sydneyplot2': {
                        factor: -0.1
                        , between: ['sydney', 'plot2']
                        , attrs: {
                            stroke: "#a4e100",
                            "stroke-width": 8,
                            "stroke-linecap": "round",
                            opacity: 0.6
                        }
                        , tooltip: {content: "Sydney - Plot2"}
                    }
                    , 'sydneyplot3': {
                        factor: 0.2
                        , between: ['sydney', 'plot3']
                        , attrs: {
                            stroke: "#a4e100",
                            "stroke-width": 4,
                            "stroke-linecap": "round",
                            opacity: 0.6
                        }
                        , tooltip: {content: "Sydney - Plot3"}
                    }
                    , 'sydneytokyo': {
                        factor: 0.2
                        , between: ['sydney', 'tokyo']
                        , attrs: {
                            stroke: "#a4e100",
                            "stroke-width": 6,
                            "stroke-linecap": "round",
                            opacity: 0.6
                        }
                        , tooltip: {content: "Sydney - Plot2"}
                    }
                }
            });
        });
    </script>

</head>

<body>
<div class="container">

    <h1>Map with links between the plotted cities</h1>

    <div class="mapcontainer">
        <div class="map">
            <span>Alternative content for the map</span>
        </div>
    </div>

    <p><b>All example for jQuery Mapael are available <a href="https://www.vincentbroute.fr/mapael/">here</a>.</b></p>

</div>


</body>
</html>